<template>
    <div class="main">
        <div class="top">
            <mt-header>
              <router-link to="/" slot="left">
                <mt-button icon="back"></mt-button>
              </router-link>
             </mt-header>
        </div>
        <div class="pic">
            <img src="/tu.png" alt="">
            <span>烘 焙 , 让 生 活 更 丰 富</span>
        </div>
        <div class="denglu">
<van-form @submit="onSubmit">
  <van-field
  @focus="shuaxin()
      "
    @blur="checkname()"
    v-model="username"
    name="用户名"
    label="用户名"
    placeholder="请输入用户名"
    :rules="[{ required: true, message: '' }]"
  />
  <div v-if="xianshi1"><span class="sp">用户不存在</span></div>
  <van-field
   
    v-model="password"
    type="password"
    name="密码"
    label="密码"
    placeholder="请输入密码"
    :rules="[{ required: true, message: '' },
    {}
    ]"
  />
  <div style="margin: 16px;">
    <van-button id="btn" round block type="info" native-type="submit">登录</van-button>
  </div>
</van-form>
        </div>
        <div class=bottom>
        <router-link to="/register">
                <mt-button class="register">没有账号,立即注册</mt-button>
        </router-link>
        </div>
</div>
</template>

<script>
import { MessageBox } from 'mint-ui';
    export default {
        data() {
    return {
      xianshi1:false,
      username: '',
      password: '',
                
     
    };
  },
  methods: {
    checkname(){
         //验证用户名是否存在
      let url=`/testname/${this.username}`
            this.$axios.get(url).then(res=>{
                if(res.data.code!==200){
                  this.xianshi1=true
                }})
    },
    shuaxin(){
      this.xianshi1=false
      
    },
    onSubmit() {
      // console.log('submit', values.用户名);
                  //验证密码和用户名是否配对存在
  
let params=`uname=${this.username}&upwd=${this.password}`
this.$axios.post('/login',params).then(res=>{
        console.log(res)
       if(res.data.code!==200){
        MessageBox('提示', '密码错误!')
       }else{
        this.$axios.get(`/uid/${this.username}`).then(res=>{
          console.log(res.data.data[0].uid)
       this.$store.commit('id_check',res.data.data[0].uid)
       console.log(this.$store.state.id)
        })
       this.$router.push('/')
      }
 })

                }
 
    
    },
  
    }
</script>

<style lang="scss" scoped>
.mint-header{
    background-color:white;
    color:black;
}
.top{
  margin-bottom: 25px;
}
.pic{
    text-align: center;
}
.pic>img{
    height: 300px;
    
}
.pic>span{
    display: block;
    margin-top: -50px;
    font-family:Cascadia Code;
    color:rgb(235,135,114);
}

.denglu{
     width: 80%;
     margin:50px auto;

}
#btn{
    background-color:rgb(235,135,114);
    border:rgb(235,135,114);
}
.mint-header{
    height: 40px;
    
   
}
.top{
    margin-top:10px;
}
.sp{
  margin-left: 115px;
  color:red;
}
.bottom{
  margin-top: -30px;
}
 .register{
        color:rgb(235,135,114);
        // border:2px solid rgb(235,135,114);
        height:30px;
        padding: 5px 6px 8px 6px  ;
        font-family:Cascadia Code ;
        font-size:13px;
        margin-left:210px ;
    }
</style>